import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { TopNavHeader, MyInput } from '../common'

export default class RechargePage extends Component {
  render() {
    return (
      <div className={`rt-recharge-container`}>
        <TopNavHeader title="充值" />
        <div className={`rt-tip-message-box`}>
          <div>充值时间为工作日8点至次日6点</div>
        </div>

        <div className={`rt-balance-box cm-margin-top`}>
          <div>账户余额：3,686.90元</div>
        </div>

        <div className={`rt-payment-way-box cm-margin-top`}>
          <div>选择支付方式：</div>
          <div className={`rt-img-box`}>
            <div className={`rt-active-payment`}>
              <img alt="wechat" src={require('static/images/wechat.png')} />
              <div className={`cm-right-angle-trangle-box`}>
                <div className={`cm-tick-box cm-tick-box-hide rt-adjust`}></div>
              </div>
            </div>
            <div>
              <img alt="online" src={require('static/images/online.png')} />
            </div>
          </div>
        </div>

        <MyInput
          placeholder="请输入充值金额（大于0.02）"
          classArr={['cm-margin-top']}
          addonAfter={<span className={`rt-adjust-addon`}>元</span>}
        />

        <div className={`rt-next-stop-btn cm-margin-top`}>下一步</div>

        <div className={`rt-tip-message`}>页面将跳转至支付平台安全支付网页，支付完成后将返回</div>
      </div>
    )
  }
}